const React = require( 'react' );
const { View, StyleSheet, NetInfo, Platform } = require( 'react-native' );
const {
    JDDevice,
    JDText,
    JDRouter,
    JDTouchable
} = require( '@areslabs/jdreact-core-lib' );
const { NavigationBar } = JDRouter;

class JDDeviceExample extends React.Component {
    componentDidMount() {
        if (Platform.OS !== 'web'){
            NetInfo.addEventListener(
                'connectionChange',
                this._handleConnectionInfoChange
            );
        }
    }

    _handleConnectionInfoChange = (connectionInfo) => {
        console.log(connectionInfo);
    };

    render() {
        return (
            <View style={styles.wrapper}>
                <NavigationBar Title="JDDevice"/>
                <View style={styles.content}>
                    <JDText style={styles.text}>
                        JDDevice.getRpx()，基于750屏幕宽度(iphone6)，按比例转换px，例如 JDDevice.getFontSize(750)，将会转换成 375px
                    </JDText>
                    <JDText style={[styles.text,{marginTop:40}]}>
                        JDDevice.getFontSize()，基于750屏幕宽度(iphone6)，计算字体大小，例如 JDDevice.getFontSize(40)，将会转换成 20px字体大小
                    </JDText>
                    
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    wrapper: {
        flex: 1,

    },
    content:{
        height:JDDevice.height,
        paddingTop:40,
        paddingRight:20,
        paddingLeft:20,
    },
    text:{
        fontSize:JDDevice.getFontSize(40)
    },
    btn: {
        borderRadius: JDDevice.getDpx(4),
        backgroundColor: '#f23030',
        justifyContent: 'center',
        alignItems: 'center',
        height: JDDevice.getRpx(80),
        marginBottom: JDDevice.getRpx(20),
    },
    btnText: {
        color: '#FFF'
    },

});

module.exports = JDDeviceExample;
